<template>
  <div class="dialog-container">
    <el-form :model="queryParams" size="small" ref="queryRef" :rules="rules" :inline="true" v-show="showSearch"
      label-width="100px">
      <el-form-item label="时间段" style="width: 468px;" prop="rangeTime">
        <el-date-picker @change="selectTime" v-model="queryParams.rangeTime" type="datetimerange" start-placeholder="开始"
          end-placeholder="结束" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
      <el-form-item label="部门" prop="deptId" label-width="40px" style="width: 150px;">
        <el-tree-select v-model="queryParams.deptId" @keyup.enter="handleQuery" :data="deptOptions"
          :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择部门" check-strictly
          clearable filterable />
      </el-form-item>
      <el-form-item label="是否出区域" prop="outState" label-width="75px" style="width: 150px;">
        <el-select v-model="queryParams.outState" placeholder="请选择">
          <el-option label="全部" value="0" />
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="车辆" prop="queryParam" label-width="40px" style="width: 150px;">
        <el-input v-model="queryParams.queryParam" placeholder="请出入车牌号或自编号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item style="float: right;">
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button size="small" type="warning" plain icon="Download" @click="handleExport"
          v-hasPermi="['safety:history:export']">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="positionList" @selection-change="handleSelectionChange" border stripe>
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="车牌号" sortable align="center" width="150" prop="plateNo" />
      <el-table-column label="机构" sortable align="center" prop="deptName" />
      <el-table-column label="查询时间段本次在区最早时间" width="240" sortable align="center" prop="stayTime" />
      <el-table-column label="查询时间段本次出区域时间" sortable width="240" align="center" prop="earliestTime" />
      <el-table-column label="停留时长" sortable align="center" prop="stayTime" />
    </el-table>

  </div>
</template>

<script setup >
import moment from 'moment';
import { historyList } from '@/api/safety/history.js'
import { deptTreeSelect } from "@/api/system/user";
const props = defineProps(['polyArr'])
const { proxy } = getCurrentInstance();
const positionList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const deptOptions = ref('')
function disableConfig(time) {
  return time.getTime() < Date.now() - (3600 * 1000 * 24 * 1) || time.getTime() > Date.now() + (3600 * 1000 * 24 * 2)
}
let time1 = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
let time2 = moment().format('YYYY-MM-DD HH:mm:ss');
const data = reactive({
  form: {},
  queryParams: {
    rangeTime: [
      time1, time2
    ],
    geometry: [],
    startTime: time1,
    endTime: time2,
    deptId: '',
    outState: '0',
    queryParam: '',
  },
  rules: {
    rangeTime: [
      {
        required: true, validator: (rule, value, callback) => {
          console.log('validate', value)
          if (value === '') {
            callback(new Error('请选择时间'))
          } else {
            let start = moment(value[0]);
            let end = moment(value[1]);
            if (end.diff(start) > 86400000) {
              callback(new Error('选着时间不能大于一天'))
            }
            callback()
          }
        }, trigger: "blur"
      }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

getList()
console.log('props.polyArr',props.polyArr)

/** 查询实时位置列表 */
function getList() {
  queryParams.value.geometry = props.polyArr;
  loading.value = true;
  historyList(queryParams.value).then(response => {
    positionList.value = response.data;
    loading.value = false;
  });
}

function selectTime(e) {
  console.log('tie', e)
  queryParams.value.startTime = e[0];
  queryParams.value.endTime = e[1];
}
// console.log('moment', moment().subtract(1, 'days'))

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};

getDeptTree()

/** 搜索按钮操作 */
function handleQuery() {
  proxy.$refs["queryRef"].validate(valid => {
    if (valid) {
      queryParams.value.pageNum = 1;
      getList();
    }
  })

}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('safety/history/export', {
    ...queryParams.value
  }, `history_${new Date().getTime()}.xlsx`)
}

</script>
